<div class="wrapper-bz-page">
    <div class="wrapper-bz-body">
        <div class="column-block block-left" style="width:300px;">
            <div class="column-title">角色</div>
            <div class="column-content">
                <div class="column-datagrid no-filter">
                    <table id="table_role_in_role_menu" style="width:100%;height:100%"></table>
                </div>
            </div>
        </div>
        <div class="column-block block-right" style="left:310px;">
            <div class="column-title">菜单列表</div>
            <div class="column-content">
                <div class="column-datagrid no-filter">
                    <table id="table_menu_in_role_menu" style="width:100%;height:100%"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function(){
        var subject = "role_in_role_menu";
        var subject_2 = "menu_in_role_menu";
        //列表-对话框-表单
        var tableId = '#table_' + subject;
        var tableId_2 = '#table_' + subject_2;
        var tableObject = $(tableId);
        var tableObject_2 = $(tableId_2);

        var selectRoleId = 0;
        var configDatagrid = {
            url:'/api/Role/getRoleOption',
            method: 'post',
            remoteSort:false,
            pagination:false,
            clickToEdit:false,
            dblclickToEdit:true,
            singleSelect:true,
            rownumbers:false,
            striped:true,
            fitColumns:true,
            fit:true,
            frozenColumns:[[
                {field:'ck',title:'ck',checkbox:true},
            ]],
            columns:[[
                {field:'id',title:'ID',width:40,hidden:true},
                {field:'role_name',title:'角色名称',width:250},
                {field:'status',title:'状态',width:100, align: 'center', formatter: function (value, row, index) {
                        if (1 == value) {
                            return '<span class="cell-status cell-yes"></span>';
                        } else if (2 == value) {
                            return '<span class="cell-status cell-no"></span>';
                        }
                    }},
            ]],
            onCheck: function(index, row){
                selectRoleId = row.id;
                tableObject_2.treegrid('reload', {role_id:row.id});
            },
            loadFilter: function(data){
                return loadFilter(data, false);
            },
            onLoadSuccess: function(){
                tableObject.datagrid('selectRow', 0);
                $(".datagrid-header-check").html("");
            },
            toolbar:[
                {
                    text:'<i class="fa fa-refresh tool-button-refresh"></i> 刷新',
                    plain:true,
                    handler:function(){
                        tableObject.datagrid('reload');
                    }
                }
            ]

        };
        var configDatagrid_2 = {
            url:'/api/Menu/getMenuTreeList',
            method: 'post',
            queryParams:{},
            remoteSort:false,
            pagination:false,
            clickToEdit:false,
            dblclickToEdit:true,
            singleSelect:false,
            checkOnSelect:false,
            rownumbers:false,
            striped:true,
            fitColumns:true,
            idField:'id',
            treeField:'menu_name_cn',
            frozenColumns:[[
                {field:'ck',title:'ck',checkbox:true},
            ]],
            columns:[[
                {field:'id',title:'ID',width:40,hidden:true},
                {field:'menu_name_cn',title:'菜单名称', width:600, formatter: function (value, row, index) {
                        if(row.menu_name_en){
                            return '<span style="color:green; padding-right:5px;">'+ value +'</span>(' + row.menu_name_en + ')';
                        }else{
                            return '<span style="color:green; padding-right:5px;">'+ value +'</span>';
                        }
                    }},
                {field:'menu_name_en',title:'菜单英文名称',hidden:true},
                {field:'status',title:'状态',width:100, align: 'center', formatter: function (value, row, index) {
                        if (1 == value) {
                            return '<span class="cell cell-yes"></span>';
                        } else if (2 == value) {
                            return '<span class="cell cell-no"></span>';
                        }
                    }},
            ]],
            loadFilter: function(data){
                return loadFilter(data, false);
            },
            onCheck: function(row){
                if(0 == selectRoleId){
                    tableObject_2.treegrid('clearChecked');
                    tableObject_2.treegrid('reload');
                    layer.msg('请勾选角色');
                    return false;
                }
                $.ajax({
                    url: '/api/RoleMenu/checkRoleMenu',
                    async: false,
                    type:'post',
                    data:{menu_id: row.id, role_id:selectRoleId},
                    success:function(resp){
                        tableObject_2.treegrid('clearChecked');
                        tableObject_2.treegrid('reload', {role_id:selectRoleId});
                        if( 0 == resp.code ){
                            layer.msg(resp.message);
                            return false;
                        }
                    }
                });
            },
            onUncheck: function(row){
                if(0 == selectRoleId){
                    tableObject_2.treegrid('clearChecked');
                    tableObject_2.treegrid('reload');
                    layer.msg('请勾选角色');
                    return false;
                }
                $.ajax({
                    url: '/api/RoleMenu/uncheckRoleMenu',
                    async: false,
                    type:'post',
                    data:{menu_id: row.id, role_id:selectRoleId},
                    success:function(resp){
                        tableObject_2.treegrid('clearChecked');
                        tableObject_2.treegrid('reload', {role_id:selectRoleId});
                        if( 0 == resp.code ){
                            layer.msg(resp.message);
                            return false;
                        }
                    }
                });
            },
            // rowStyler: function(row){
            //     if(row.role_menu_id > 0 && selectRoleId > 0){
            //         return 'background:#c6e9ff';
            //     }
            // },
            onLoadSuccess: function(){
                $(".datagrid-header-check").html("");
            },
            toolbar:[
                {
                    text:'<i class="fa fa-refresh tool-button-refresh"></i> 刷新',
                    plain:true,
                    handler:function(){
                        tableObject_2.treegrid('reload');
                    }
                }
            ]
        };
        tableObject.datagrid(configDatagrid);
        tableObject_2.treegrid(configDatagrid_2);


        function getCheckedRowData(opText){
            var checkList = tableObject.datagrid('getChecked');
            if(checkList.length < 1){
                layer.msg('请选择要'+ opText +'的数据');
                return false;
            }
            return checkList;
        }

        function getCheckedRowData_2(opText){
            var checkList = tableObject_2.datagrid('getChecked');
            if(checkList.length < 1){
                layer.msg('请选择要'+ opText +'的数据');
                return false;
            }
            return checkList;
        }

    });
</script>
